<div class="layui-fluid" id="VIEW-index" lay-title="首页">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm4">
                    <div class="qsadmin-linecard">
                        <p class="qsadmin-linecard-title">日成交额</p>
                        <span class="qsadmin-linecard-text">￥229,200</span>
                        <span class="qsadmin-ignore">万元</span>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="qsadmin-linecard qsadmin-br-green">
                        <p class="qsadmin-linecard-title">日新增用户</p>
                        <span class="qsadmin-linecard-text">2468</span>
                        <span class="qsadmin-ignore">人</span>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="qsadmin-linecard qsadmin-br-red">
                        <p class="qsadmin-linecard-title">
                            待处理订单
                            <a href="#" class="qsadmin-c-blue qsadmin-font-12">立即处理</a>
                        </p>
                        <span class="qsadmin-linecard-text">￥229,200</span>
                        <span class="qsadmin-ignore">万元</span>
                    </div>
                </div>
                <div class="layui-col-xs12">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-sm6">
                            <div class="layui-card">
                                <div class="layui-card-header">快捷操作</div>
                                <div class="layui-card-body" style="height: 200px;">
                                    <div class="layui-row" style="margin-top:15px;">
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-skin-fill"></span>
                                            <p>添加商品</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-notification-fill"></span>
                                            <p>发布文章</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-message-fill"></span>
                                            <p>订单列表</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-message-fill"></span>
                                            <p>热门评论</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-heart-fill"></span>
                                            <p>用户管理</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-setting-fill"></span>
                                            <p>短信营销</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-star-fill"></span>
                                            <p>网站流量</p>
                                        </div>
                                        <div class="layui-col-xs3 qsadmin-grid">
                                            <span class="layui-icon layui-icon-setting-fill"></span>
                                            <p>网站设置</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm6">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <span class="layui-icon layui-icon-fire-fill"></span>
                                    最新评论<a href="#" class="qsadmin-c-gray qsadmin-font-12 qsadmin-fr">查看更多</a>
                                </div>
                                <!--
                                  <div class="qsadmin-cell">
                                      <a lay-href="/" class="qsadmin-avatar" title="在线">
                                          <img src="http://tx.haiqq.com/uploads/allimg/170504/0641415410-1.jpg" />
                                      </a>
                                      <div class="qsadmin-cell-title">axsxs 说：</div>
                                      <div class="qsadmin-cell-label">非常好看，就上肚子上肉有点多了，申请换货速度很快啊。</div>
                                      <div class="qsadmin-cell-extra">112 <span class="layui-icon layui-icon-message"></span></div>
                                  </div>
                                -->
                                <div class="layui-card-body" style="height: 210px; padding:5px 0">
                                    <div class="qsadmin-cell qsadmin-cell-arrow">
                                        <a lay-href="/" class="qsadmin-avatar qsadmin-avatar-xs" title="在线">
                                            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1736487673,2633075576&fm=26&gp=0.jpg"/>
                                        </a>
                                        <div class="qsadmin-cell-title">
                                            竹鼠是无辜的 说：<span class="qsadmin-c-gray">大家来看看，这是有多丑。。[照片][照片]</span>
                                        </div>
                                    </div>
                                    <div class="qsadmin-cell qsadmin-cell-arrow">
                                        <a lay-href="/" class="qsadmin-avatar qsadmin-avatar-xs" title="在线">
                                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1493370524,4156203431&fm=26&gp=0.jpg"/>
                                        </a>
                                        <div class="qsadmin-cell-title">
                                            Alex。 说：<span class="qsadmin-c-gray">第一感觉就是很长，价格实惠</span>
                                        </div>
                                    </div>
                                    <div class="qsadmin-cell qsadmin-cell-arrow">
                                        <a lay-href="/" class="qsadmin-avatar qsadmin-avatar-xs" title="在线">
                                            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4205845588,1460063116&fm=26&gp=0.jpg"/>
                                        </a>
                                        <div class="qsadmin-cell-title">
                                            薪火 说：<span class="qsadmin-c-gray">随着包装盒压坏了，但是鼠标垫确实不错，非常细腻的表面</span>
                                        </div>
                                    </div>
                                    <div class="qsadmin-cell qsadmin-cell-arrow">
                                        <a lay-href="/" class="qsadmin-avatar qsadmin-avatar-xs" title="在线">
                                            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2085920166,1744212726&fm=26&gp=0.jpg"/>
                                        </a>
                                        <div class="qsadmin-cell-title">
                                            路见不平一声吼 说：<span class="qsadmin-c-gray">五星，好评！</span>
                                        </div>
                                    </div>
                                    <div class="qsadmin-cell qsadmin-cell-arrow">
                                        <a lay-href="/" class="qsadmin-avatar qsadmin-avatar-xs" title="在线">
                                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3662899748,1914720251&fm=26&gp=0.jpg"/>
                                        </a>
                                        <div class="qsadmin-cell-title">
                                            天泉 说：<span class="qsadmin-c-gray">超值 超值 超值。</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-card-extra qsadmin-c-gray">
                                    <span class="qsadmin-c-blue">今日</span>&nbsp;&nbsp;
                                    <span>本周</span>&nbsp;&nbsp; <span>本月</span>&nbsp;&nbsp;
                                    <span>全年</span>&nbsp;&nbsp;
                                </div>
                                <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">销售额</li>
                                        <li>访问量</li>
                                        <li>注册量</li>
                                    </ul>
                                    <div class="layui-tab-content" style="padding:0;">
                                        <div class="layui-tab-item layui-show">
                                            <div id="index-echartLine" style="width: 100%;height:400px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs12">
                            <div class="layui-card">
                                <div class="layui-tab layui-tab-brief" lay-filter="index-order">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">全部订单</li>
                                        <li>待付款</li>
                                        <li>待发货</li>
                                        <li>待处理退款</li>
                                    </ul>
                                    <div class="layui-tab-content" style="padding:0;">
                                        <div class="layui-tab-item layui-show qsadmin-table-full">
                                            <table lay-filter="index-tableOrder"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg4">
            <div class="layui-card">
                <div class="layui-card-header">版本信息</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <colgroup>
                            <col width="100"/>
                            <col/>
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>当前版本</td>
                            <td>v1.0.0</td>
                        </tr>
                        <tr>
                            <td>基于框架</td>
                            <td>
                                <script type="text/html" template>
                                    layui-v/# layui.v #/
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td>主要特色</td>
                            <td>单页面 / 响应式 / 简洁</td>
                        </tr>
                        <tr>
                            <td>下载源码</td>
                            <td style="padding-bottom: 0;">
                                <div class="layui-btn-container">
                                    <a href="https://gitee.com/starvv_w/qsAdmin" target="_blank"
                                       class="layui-btn layui-btn-success">GITEE</a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">管理员</div>
                <div class="layui-card-body">
                    <a lay-href="/" class="qsadmin-avatar qsadmin-mar-r20" title="在线">
                        <span class="layui-badge-dot layui-bg-green"></span>
                        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"/>
                    </a><a
                        lay-href="/" class="qsadmin-avatar qsadmin-mar-r20" title="在线">
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"/>
                </a><a
                        lay-href="/" class="qsadmin-avatar qsadmin-mar-r20 qsadmin-gray" title="离线">
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"/>
                </a><a
                        lay-href="/" class="qsadmin-avatar qsadmin-mar-r20 qsadmin-gray" title="离线">
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"/>
                </a><a
                        lay-href="/" class="qsadmin-avatar qsadmin-mar-r20 qsadmin-gray" title="离线">
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png"/>
                </a>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="layui-icon layui-icon-notification-fill"></i> 公告动态
                </div>
                <div class="qsadmin-cell">
                    <div class="qsadmin-cell-title">
                        广州商X一行将于30日莅临公司考察调研
                    </div>
                    <div class="qsadmin-cell-extra">09月14日 10:23:21</div>
                </div>
                <div class="qsadmin-cell">
                    <div class="qsadmin-cell-title">关于公司人员的调整</div>
                    <div class="qsadmin-cell-extra">09月14日 12:11:21</div>
                </div>
                <div class="qsadmin-cell">
                    <div class="qsadmin-cell-title">10月国庆新活动~，筹备上线</div>
                    <div class="qsadmin-cell-extra">09月14日 13:32:21</div>
                </div>
                <div class="qsadmin-cell">
                    <div class="qsadmin-cell-title">转化率统计分析报告</div>
                    <div class="qsadmin-cell-extra">08月10日 16:01:02</div>
                </div>
                <div class="qsadmin-cell">
                    <div class="qsadmin-cell-title">客服工作中的话语话术分享</div>
                    <div class="qsadmin-cell-extra">08月10日 15:53:23</div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">服务器监控</div>
                <div class="layui-card-body">
                    <div class="qsadmin-pad-b20">
                        <h2 class="qsadmin-pad-b10">
                            85%<span class="qsadmin-font-14 qsadmin-c-gray qsadmin-fr">CPU使用率</span>
                        </h2>
                        <div class="layui-progress">
                            <div class="layui-progress-bar layui-bg-blue" lay-percent="85%"></div>
                        </div>
                    </div>
                    <div class="qsadmin-pad-b20">
                        <h2 class="qsadmin-pad-b10">
                            58%<span class="qsadmin-font-14 qsadmin-c-gray qsadmin-fr">内存占用率</span>
                        </h2>
                        <div class="layui-progress">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="58%"></div>
                        </div>
                    </div>
                    <div class="qsadmin-pad-b20">
                        <h2 class="qsadmin-pad-b10">
                            92%<span class="qsadmin-font-14 qsadmin-c-gray qsadmin-fr">磁盘占用率</span>
                        </h2>
                        <div class="layui-progress">
                            <div class="layui-progress-bar layui-bg-cyan" lay-percent="92%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">系统信息</div>
                <div class="layui-card-body">
                    <p>数据库信息：Mysql</p>
                    <hr/>
                    <p>服务器IP：192.168.3.12</p>
                    <hr/>
                    <p>服务器端口：80</p>
                    <hr/>
                    <p>操作系统：WinXP</p>
                    <hr/>
                    <p>WEB服务器：Apache</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="TPL-index-params">
        /## layui.each(d.params,function(i,item){ #/
        <span class="layui-badge-rim">/# item.val #/</span>
        /## }) #/
    </script>
    <script type="text/html" id="TPL-index-status">
        /##
        var status = {
        WAIT_PAY:{title:'待付款',color:'blue'},
        WAIT_DELIVER:{title:'待发货',color:'orange'},
        WAIT_REFUND:{title:'待退款',color:'red'},
        }[d.status];
        #/
        <span class="layui-badge layui-bg-/# status.color #/">/# status.title #/</span>
    </script>
</div>
<script>
    layui.use(
        ['admin', 'echarts', 'element', 'helper', 'table', 'util'],
        function (admin, echarts, element, helper, table, util) {
            var $ = layui.jquery;
            var view = $('#VIEW-chart-index');
            element.render('progress');

            createChart();

            var tableObj = table.render({
                size: 'nob',
                elem: '[lay-filter="index-tableOrder"]',
                api: 'getGoods',
                height: 400,
                cols: [
                    [
                        {
                            title: '状态',
                            fixed: true,
                            templet: '#TPL-index-status',
                            width: 80
                        },
                        {field: 'title', title: '商品名称', minWidth: 300},
                        {title: '商品参数', templet: '#TPL-index-params', minWidth: 240},
                        {
                            title: '商品单价',
                            templet: '<p><b class="qsadmin-c-red">￥/# d.price #/</b></p>',
                            align: 'center',
                            width: 90
                        },
                        {
                            title: '购买数量',
                            templet: '<p><b>/# d.buycount #/</b> <span class="qsadmin-c-gray">件</span></p>',
                            align: 'center',
                            width: 90
                        },
                        {
                            field: 'time',
                            title: '操作时间',
                            templet: '<p><span title="/# d.time #/" class="qsadmin-c-gray">/# layui.util.timeAgo(d.time) #/</span></p>',
                            align: 'center',
                            width: 170
                        }
                    ]
                ]
            });

            element.on('tab(index-order)', function (data) {
                tableObj.reload()
            });

            element.on('tab(index-chart)', function (data) {
                createChart()
            });

            function createChart() {
                var seriesData = [];
                var xAxisData = [];
                for (var i = 1; i <= 12; i++) {
                    var val = helper.rand(8000, 10000);
                    seriesData.push(val);
                    xAxisData.push((i < 10 ? '0' + i : i) + ':00')
                }
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData
                    },
                    yAxis: {
                        max: function (val) {
                            return val.max + 400
                        },
                        min: function (val) {
                            return val.min - 400
                        },
                        type: 'value',
                        axisLabel: {formatter: '￥{value}'},
                        axisPointer: {snap: true}
                    },
                    series: [
                        {
                            name: '时段销售额',
                            type: 'line',
                            symbolSize: 12,
                            lineStyle: {
                                normal: {
                                    width: 5,
                                    shadowColor: '#5a8bff',
                                    shadowBlur: 40,
                                    shadowOffsetY: 10
                                }
                            },
                            data: seriesData
                        }
                    ]
                };
                echarts
                    .init(document.getElementById('index-echartLine'), 'blue')
                    .setOption(option)
            }
        }
    )
</script>